{% extends "base_generic.html" %}

{% block content %}
<h1>本地图书馆首页</h1>

<p>欢迎来到<em>本地图书馆</em>，这是一个非常基础的Django网站，作为<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Django/Tutorial_local_library_website">教程示例</a>发布在Mozilla开发者网络上。</p>
<p>本教程演示了如何创建Django框架网站和应用程序，定义URL映射、视图（包括通用列表和详情视图）、模型和模板。</p>


<h2>UML模型</h2>
<p>网站Django模型结构的UML图如下所示。 </p>

<div>
{% load static %}
<img src="{% static 'images/local_library_model_uml.png' %}" alt="My image" width="600px">
</div>  


<h2>动态内容</h2>

<p>图书馆有以下记录数量：</p>
<ul>
  <li><i class="bi bi-book me-2"></i><strong>图书:</strong> {{ num_books }}</li>
  <li><i class="bi bi-box me-2"></i><strong>副本:</strong> {{ num_instances }}</li>
  <li><i class="bi bi-check-circle me-2"></i><strong>可用副本:</strong> {{ num_instances_available }}</li>
  <li><i class="bi bi-person me-2"></i><strong>作者:</strong> {{ num_authors }}</li>
</ul>

<p>
  您已访问此页面 {{ num_visits }}{% if num_visits == 1 %} 次{% else %} 次{% endif %}。
</p>

<div class="row mt-4">
    <div class="col-md-3">
        <div class="card text-center h-100">
            <div class="card-body">
                <i class="fas fa-book fa-3x text-primary mb-3"></i>
                <h5 class="card-title">总书籍数</h5>
                <p class="card-text display-4">{{ num_books }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center h-100">
            <div class="card-body">
                <i class="fas fa-copy fa-3x text-success mb-3"></i>
                <h5 class="card-title">可借阅副本</h5>
                <p class="card-text display-4">{{ num_instances_available }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center h-100">
            <div class="card-body">
                <i class="fas fa-user-pen fa-3x text-info mb-3"></i>
                <h5 class="card-title">作者总数</h5>
                <p class="card-text display-4">{{ num_authors }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center h-100">
            <div class="card-body">
                <i class="fas fa-users fa-3x text-warning mb-3"></i>
                <h5 class="card-title">当前用户</h5>
                <p class="card-text display-4">{{ num_users }}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}
